@charset "utf-8";/*= Reset CSS 
============= */
html, body{border:0;margin:0;padding:0;}
body{font:14px "Microsoft Yahei", Arial, sans-serif;min-width:100%;min-height:100%;color:#666;background:url(../images/bg-2.jpg) repeat;}
.container{margin:0 auto;max-width:1200px;}
*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;}
.full-length{width:100%;float:left;padding-bottom:0px;}
a:hover{text-decoration:none;}
h3{font-size:20px;margin:5px 0 10px;}
p{font-weight:300;line-height:25px;font-size:14px;margin-bottom:15px;}
.btn{display:inline-block;padding:5px 10px;font-size:14px;color:#fff;border:2px solid #052d85;background-color:#052d85;text-decoration:none;transition:0.4s;}
.btn:hover{background-color:transparent;color:#052d85;transition:0.4s;}
.text-desc{position:absolute;left:0;top:0;background-color:#fff;height:100%;opacity:0;width:100%;padding:20px;}
.container ul{margin:0 auto;max-width:1200px;}
.container ul li{width:280px;float:left;margin:0px 10px 10px 10px;}
.ftt1{width:1200px;margin:0 auto;overflow:hidden;margin-top:35px;}
/* effect-6 css */
.port-6{margin-bottom:10px;float:left;width:100%;position:relative;overflow:hidden;text-align:center;border:2px solid #052d85;overflow:visible;}
.port-6.effect-1{z-index:8;}
.port-6.effect-1 img{transition:0.5s;}
.port-6.effect-1 .text-desc{transform:translateY(-100%);opacity:0;padding:10px 20px;transition:0.5s;}
.port-6.effect-2{z-index:7;}
.port-6.effect-2 img{transition:0.6s;z-index:1;}
.port-6.effect-2 .text-desc{transform:translateX(-100%);opacity:0;padding:40px 120px 20px 20px;transition:0.6s;}
.port-6.effect-3 img{transition:0.5s;}
.port-6.effect-3 .text-desc{opacity:0;padding:85px 20px 10px;transition:0.5s;}
/* effect-6 css end */
/*= Media Screen CSS
==================== */
@media only screen and (max-width:1090px){ul{width:340px;margin:0 auto;}
li{width:100%;margin:20px 0;}
.port-5.effect-1{z-index:19;}}
 @media only screen and (max-width:360px){ul{width:300px;}
.port-1 .text-desc, .text-desc,  .port-3.effect-1 .text-desc,  .port-3.effect-3 .text-desc,  .port-4.effect-1 .text-desc,  .port-4.effect-2 .text-desc,  .port-4.effect-3 .text-desc, .port-8 .text-desc{padding:20px;}
.text-desc{padding:7px;}
.port-5.effect-1 .text-desc{padding:13px 20px 20px 90px;}
.port-5.effect-2 .text-desc{padding:10px;}
.port-5.effect-3 .text-desc{padding:16px 90px 20px 20px;}
.port-6.effect-1 .text-desc .btn,  .port-6.effect-2 .text-desc .btn,  .port-6.effect-3 .text-desc .btn,  .port-7.effect-1 .text-desc .btn,  .port-7.effect-2 .text-desc .btn,  .port-7.effect-3 .text-desc .btn,  .port-8.effect-3 .text-desc .btn{display:none;}
.port-6.effect-2 .text-desc{padding:20px 120px 20px 20px;}
.port-6.effect-3 .text-desc{padding:75px 20px 10px;}
.port-7.effect-1 .text-desc{padding:12px 10px;}
.port-8.effect-3 .text-desc{padding:28px 70px 20px;}}
/*= Media Screen CSS End
======================== */